<script setup>
import LfDropdownPanel from '@/components/commonUI/LfDropdownPanel.vue'
import SubmitSelectTopicList from './SubmitSelectTopicList.vue'
import arrowIcon from '/imgs/commonIcons/arrow.svg'
import { useUserTopicListQuery } from '@/composables/useUserInfoQuery'
import { ref, onMounted, nextTick } from 'vue'
const props = defineProps({
  onTopicClick: Function,
  selectedTopicName: String,
  selectedTopicAvatarUrl: String,
})

const dropdownRef = ref(null)

const selectedTopicName = ref(undefined)
const selectedTopicAvatarUrl = ref(undefined)

onMounted(() => {
  nextTick(() => {
    selectedTopicName.value = props.selectedTopicName
    selectedTopicAvatarUrl.value = props.selectedTopicAvatarUrl
  })
})

const handleTopicClick = (id, name, url) => {
  props.onTopicClick(id, name)
  selectedTopicName.value = name
  selectedTopicAvatarUrl.value = url

  dropdownRef.value.hidePanel()
}

const { data } = useUserTopicListQuery()

// todo 分页
</script>

<template>
  <div class="relative h-fit">
    <LfDropdownPanel ref="dropdownRef">
      <div class="cursor-pointer bg-slate-200 flex-cc w-fit p-3 py-1 rounded-full gap-2 hover:bg-slate-300">
        <img
          v-if="selectedTopicAvatarUrl"
          class="w-6 h-6 rounded-full object-cover"
          :src="selectedTopicAvatarUrl"
          alt="" />
        <div :class="{ 'font-semibold': selectedTopicName, 'text-[#73777c]': !selectedTopicName }">
          {{ selectedTopicName ?? '请先选择主题' }}
        </div>
        <img :src="arrowIcon" alt="" />
      </div>

      <template #content>
        <SubmitSelectTopicList :data="data" :onTopicClick="handleTopicClick" />
      </template>
    </LfDropdownPanel>
  </div>
</template>

<style scoped lang="scss"></style>
